<template>
	<view class="sea-wp">
		<view class="nav_bar">
			<view class="search-title">
				<view class="back-btn" @click="$navBack()">
					<uni-icons type="back" size="30" color="rgba(0,0,0,.5)"></uni-icons>
				</view>

				<icon class="icon" type="search" size="20" color="#ccc" @click="search" />
				<input type="text" @confirm="search" v-model="keyword" placeholder="搜索产品或门店" />
			</view>
			<!-- <view class="selet_bar">
				<text class="active">门店</text>
				<text class="active">团购</text>
			</view> -->
		</view>
		<view class="JcurSkill_lists">
			<view class="list" v-for="item in list" :key="item.uid" @click="$navTo('../shoplist/shopgoods?id='+item.uid)">
				<view class="body">
					<view class="logo">
						<image :src="item.logo"></image>
						<!-- <view class="tag" v-if="item.paymode==0">折扣</view> -->
						<!-- <view class="shareprice" v-if="item.shareprice">百元赚{{item.shareprice.toFixed(2)}}</view> -->
					</view>
					<view class="JcurSkill_list_cont">
						<view class="title">
							<view class="flex_title">
								<!-- <text class="icon1" v-if="item.paymode==0">折</text> -->
								<text>{{item.supname}}</text>
								<text class="icon" v-if="item.ispig==1">清真</text>
							</view>
						</view>
						<!-- <view class="label flex" v-if="(item.vipdiscount!=10.00&&item.vipdiscount!=0)||(item.discount!=10.00&&item.discount!=0)">
							<view class="info">
								<view class="dis">到店买单</view>
								<view class="vip_zhekou" v-if="item.vipdiscount!=10.00&&item.vipdiscount!=0">
									<image src="/static/vipsss.png"></image>
									<view>{{item.vipdiscount}}<text>折</text></view>
								</view>
								<view class="disNum" v-if="item.discount!=10.00&&item.discount!=0">{{item.discount}}<text>折</text></view>
							</view>
						</view> -->
						<view class="label flex">
							<view class="other">
								<text class="gray">已售{{item.ordernum}}单</text>
								<text class="">{{item.browerNum}}人进店</text>
							</view>
							<view class="addre" @click.stop="openMap(item)">
								<image src="/static/index/dizhi.png" mode="widthFix"></image>
								<text>{{item.distance}}</text>
							</view>
						</view>
						<view class="label flex">
							<view class="other"></view>
							<view class="flex short_add">
								<view class="r_border" v-if="item.shorttitle!=''">{{item.shorttitle}}</view>
								<view class="s_tit">{{item.shortaddress}}</view>
							</view>
						</view>
						<view class="points">
							<text>绿色积分</text><text class="aggravation">{{item.cpdiscount}}%</text>
							<!-- <view class="orderBuy" v-if="item.openpay==1" @click.stop="discountOrder(item.uid)">线下买单</view> -->
						</view>
					</view>
				</view>
				<!-- <view class="img_list" v-if="item.goods&&item.goods.length>3">
					<view class="s_left">
						<view class="s_left_item">
							<view class="s_shu">
								<view>团</view>
								<view>购</view>
								<view>优</view>
								<view>惠</view>
							</view>
							<view class="s_more">></view>
						</view>
					</view>
					<scroll-view class="shop_list"  scroll-x>
						<view class="item" v-for="it in item.goods" :key="it.id" @click.stop="$navTo('/pages/product/groupbuy?id='+it.id)">
							<view class="shop_img">
								<image :src="it.thumb" mode="widthFix"></image>
							</view>
							<view class="title">{{it.title}}</view>
							<view class="price"><text style="font-size: 14rpx;">￥</text>{{it.saleprice}}</view>
						</view>
					</scroll-view>
				</view> -->
				<!-- <view class="text_shop_list" v-if="item.goods&&item.goods.length>0&&item.goods.length<=3">
					<view class="text_shop_item" v-for="it in item.goods" @click.stop="$navTo('/pages/product/groupbuy?id='+it.id)">
						<view class="t_sheng">
							<text v-if="it.sparemoney>0">省￥{{it.sparemoney.toFixed(2)}}</text>
						</view>
						<text class="t_tag">团</text>
						<text class="t_new">￥{{it.saleprice}}</text>
						<text class="t_old">￥{{it.productprice}}</text>
						<view class="t_title clamp">
							<text class="">{{it.title}}</text>
						</view>
					</view>
				</view> -->
			</view>
			<view class="empty">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<view v-if="ismore">到底了~</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location'])
		},
		data() {
			return {
				keyword: '',
				page: 0,
				list: [],

				isloading: false,
				ismore: false,
			}
		},
		onReachBottom() {
			// this.getList();
		},
		methods: {
			search() {
				// this.page = 0;
				this.list = [];
				this.getList();
			},
			discountOrder(id) {
				// if (!uni.getStorageSync('token')) {
				// 	this.$refs.popup.open();
				// 	return;
				// }
				this.$axios('supplierGoods/payCode', 'POST', 'shop', {
					supplier_uid: id
				}).then(res => {
					if (res.data.code == 200) {
						this.$navTo(res.data.data);
					}
				})
			},
			getList() {
				this.page++;
				let obj = {
					...this.Location,
					...{
						keyword: this.keyword,
						// page: this.page
					}
				}
				this.isloading = true;
				this.ismore = false;
				this.$axios('o2o/search', 'POST', 'shop', obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data];
						this.ismore = true;
					}
				})
			},
			openMap(v) {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 10,
					name: v.shorttitle,
					address: v.supaddress,
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "/store/icon.css";

	page {
		background: #f2f2f2;
	}

	.sea-wp {
		position: relative;

		.nav_bar {
			background: #fff;
			padding-top: calc(var(--status-bar-height) + 30rpx);
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
		}

		.search-title {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 0 20upx;
			position: relative;

			.back-btn {
				position: relative;
				left: -10upx;
			}

			input {
				display: block;
				flex: 1;
				line-height: 60upx;
				padding: 0 40upx 0 80upx;
				height: 60upx;
				font-size: 26upx;
				border-radius: 50upx;
				color: rgb(96, 98, 102);
				margin: 0 60upx 0 10upx;
				background-color: rgba(231, 231, 231, 0.7);
			}

			.icon {
				position: absolute;
				top: 30upx;
				left: 110upx;
			}
		}

		.selet_bar {
			display: flex;
			align-items: center;

			text {
				font-size: 32upx;
				line-height: 80upx;
				padding-left: 30upx;
			}

			.active {
				color: $bg-color;
				font-weight: bold;
			}
		}
	}

	.JcurSkill_lists {
		color: #303133;
		padding: 20rpx;
		padding-top: calc(var(--status-bar-height) + 130rpx);
	}
	
	.list {
		background: #fff;
		border-radius: 12px;
		// box-shadow: 0 0 10px 3px #DCDFE6;
		// margin: 0 0 20upx;
		margin-top: 20rpx;
	
		.body {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 20rpx;
			.logo{
				position: relative;
				height: 186rpx;
				width: 186rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
					display: block;
				}
				.tag{
					position: absolute;
					background: linear-gradient( 90deg, #BB2FF2 0%, #8615E1 100%);
					color: #fff;
					font-size: 20rpx;
					right: 0;
					top: 0;
					text-align: center;
					width: 60rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 2rpx 12rpx 0rpx 4rpx;
				}
				.shareprice{
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(#000,.5);
					color: #fff;
					font-size: 18rpx;
					padding: 0 8rpx;
					border-bottom-left-radius: 15rpx;
					border-top-right-radius: 8rpx;
				}
			}
			
		}
	}
	
	.JcurSkill_list_cont {
		width: calc(100% - 186rpx);
		padding-left: 20rpx;
		.flex_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.title {
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 45upx;
			font-size: 32rpx;
			font-weight: bold;
	
			.icon {
				border: 2rpx #039140 solid;
				border-radius: 4upx;
				font-size: 20rpx;
				line-height: 26rpx;
				color: #039140;
				margin-right: 10rpx;
				padding: 0 6rpx;
			}
			.icon1{
				border: 1px $bg-color solid;
				border-radius: 4upx;
				background: $bg-color;
				font-size: 24rpx;
				line-height: 38rpx;
				padding: 0 6rpx;
				border-radius: 6upx;
				color: #fff;
				margin-right: 5rpx;
				height: 40rpx;
			}
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.points{
			display: inline-block;
			border: 2rpx solid #2d8c2d;
			font-size: 24rpx;
			border-radius: 8rpx;
			text{
				background: #2d8c2d;
				color: #fff;
				border-radius: 0;
				padding: 0 10rpx;
			}
			.aggravation {
				background: transparent;
				color: #2d8c2d;
				padding: 0 10rpx;
				font-weight: normal;
			}
		}
		.label {
			font-size: 28upx;
			color: #303133;
			margin-top: 8rpx;
			white-space: nowrap;
			.info{
				display: flex;
				color: #999999;
				font-size: 24rpx;
				align-items: center;
				view{
					margin-right: 24rpx;
				}
				.disNum{
					font-size: 26rpx;
					color: #8615E1;
					font-weight: 600;
					text{
						font-size: 20rpx;
						font-weight: 400;
					}
				}
				.dis{
					width: 98rpx;
					height: 38rpx;
					// background: #FBF8FE;
					background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
					border-radius: 8rpx;
					// display: flex;
					// justify-content: space-around;
					// align-items: center;
					font-size: 20rpx;
					text-align: center;
					line-height: 38rpx;
					// color: #8615E1;
					color: #FFFFFF;
					margin-right: 14rpx;
				}
				.vip_zhekou{
					position: relative;
					margin-right: 10rpx;
					font-size: 26rpx;
					image{
						position: absolute;
						left: 0;
						top: 0;
						width: 128rpx;
						height: 34rpx;
					}
					view{
						color: #FFF4CD;
						font-weight: 600;
						position: relative;
						padding-left: 46rpx;
						line-height: 34rpx;
						text{
							font-size: 20rpx;
							font-weight: 400;
							padding: 0;
						}
					}
				}
			}
			.short_add{
				color: #999999;
				font-size: 24rpx;
				.r_border{
					position: relative;
					padding-right: 14rpx;
				}
				.r_border:after {
					position: absolute;
					content: '';
					border-right: 1px #999999 solid;
					top: 50%;
					right: 0;
					height: 22rpx;
					transform: translateY(-50%);
				}
				.s_tit{
					margin-left: 10rpx;
				}
			}
			.addre{
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					width: 14rpx;
					margin-right: 4rpx;
				}
			}
			.other{
				display: flex;
				font-size: 24rpx;
				color: #999999;
				.gray{
					margin-right: 30rpx;
				}
			}
			.orderBuy{
				width: 140rpx;
				line-height: 46rpx;
				background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
				border-radius: 8rpx;
				color: #FFFFFF;
				text-align: center;
				font-size: 24rpx;
			}
		}
	}
	
	.price{
		.reco_goods{
			width: 65%;
			.swiper_goods {
				height: 32rpx;
				padding-top: 4rpx;
				font-size: 20rpx;
				.swiper-item-goods {
					color: #45b0e6;
					display: flex;
					align-items: center;
					image{
						width: 20rpx;
						margin-right: 10rpx;
					}
					.clamp{
						width: 70%;
					}
					text:nth-child(3){
						color: #d40520;
						padding: 0 5rpx;
					}
					text:nth-child(4){
						color: #7d7979;
						text-decoration: line-through;
						font-size: 22rpx;
					}
				}
			}
		}
	}
	.img_list{
		display: flex;
		justify-content: space-between;
		margin-top: -8rpx;
		padding: 0 20rpx 16rpx 20rpx;
		.s_left{
			width: 186rpx;
			display: flex;
			justify-content: flex-end;
		}
		.s_left_item{
			width: 62rpx;
			height: 134rpx;
			background: linear-gradient(180deg, #BB2EF2 0%, #8716E1 100%);
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.s_shu{
			color: #FFFFFF;
			font-size: 18rpx;
			line-height: 1.4;
			margin-bottom: 6rpx;
			margin-top: -4rpx;
		}
		.s_more{
			width: 18rpx;
			height: 18rpx;
			line-height: 18rpx;
			background: #fff;
			color: #FD564F;
			font-size: 12rpx;
			text-align: center;
			border-radius: 50%;
		}
	}
	.shop_list {
		width: calc(100% - 186rpx);
		padding: 0 0 0 20upx;
		white-space: nowrap;
		.item {
			display: inline-block;
			position: relative;
			width: 116rpx;
			margin-right: 10rpx;
			.shop_img{
				width: 100%;
				height: 84rpx;
				display: flex;
				align-items: center;
				border-radius: 8rpx;
				overflow: hidden;
				margin-bottom: 6rpx;
				image {
					width: 100%;
				}
			}
			.title {
				color: #333333;
				overflow: hidden;
				font-size: 20upx;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
			.price {
				color: #333333;
				font-size: 20rpx;
			}
			.tag{
				color: #fff;
				background: #0c8918;
				padding: 0 6rpx;
				border-radius: 10rpx;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 24rpx;
				text-align: center;
				transform: scale(1);
			}
		}
	
	}
	.text_shop_list{
		padding: 0 20rpx 10rpx 20rpx;
		margin-top: -14rpx;
		.text_shop_item{
		    display: flex;
		    align-items: center;
			padding-bottom: 10rpx;
			.t_sheng{
				width: 186rpx;
				text-align: right;
				font-size: 20rpx;
				text{
					color: #d86e7c;
					border: 1rpx solid #d86e7c;
					border-radius: 8rpx;
					padding: 0 4rpx;
					white-space: nowrap;
				}
			}
			.t_tag{
				margin-left: 20rpx;
				color: #AF141D;
			    background: #FDB3B7;
			    padding: 2rpx 6rpx;
			    border-radius: 8rpx;
			    font-size: 20rpx;
			    text-align: center;
			}
			.t_new{
				color: #AF141D;
			    font-size: 28rpx;
			    // font-weight: bold;	
				white-space: nowrap;
			}
			.t_old{
				color: #999;
				text-decoration: line-through;
			    font-size: 18rpx;
				margin-left: 8rpx;
				white-space: nowrap;
			}
			.t_title{
				flex: 1;
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.empty {
		color: #3e9ff4;
		padding-top: 30upx;
		text-align: center;

		image {
			height: 50upx;
			width: 50upx;
		}
	}
</style>